<template>
  <div
    v-loading="getRuleLoading"
  >
    <el-card
      v-for="(rule, index) in Data.Rules"
      :key="index"
      style="margin: 10px"
    >
      <el-descriptions
        class="margin-top"
        :title="rule.name"
        :column="1"
        border
      >
        <template #extra>
          <el-button
            v-if="rule.enable === 0"
            v-loading="switchEnableLoading"
            type="success"
            @click="switchEnable(rule)"
          >
            启用
          </el-button>
          <el-button
            v-else
            v-loading="switchEnableLoading"
            type="danger"
            @click="switchEnable(rule)"
          >
            禁用
          </el-button>
          <el-button
            type="primary"
            plain
            @click="showUpdateDialog(rule)"
          >
            修改
          </el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div>
              <el-icon>
                <Coin />
              </el-icon>
              积分
            </div>
          </template>
          {{ rule.point }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div>
              <el-icon>
                <CirclePlus />
              </el-icon>
              添加日期
            </div>
          </template>
          {{ rule.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div>
              <el-icon>
                <EditPen />
              </el-icon>
              更新日期
            </div>
          </template>
          {{ rule.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <DialogForm
      :dialog-form-visible="Data.dialogFormVisible"
      :name="Data.dialogFormData.name"
      :enable="Data.dialogFormData.enable"
      :point="Data.dialogFormData.point"
      @change-show="changeShow"
    />
  </div>
</template>

<script setup>
import * as api from '@/api/point/rule'
import DialogForm from './compontents/update-rule-dialog.vue'

const getRuleLoading = ref(true)
const switchEnableLoading = ref(false)
const Data = reactive({
  // 获取到的规则数据
  Rules: [],
  // 用于控制弹窗的显示和隐藏
  dialogFormVisible: false,
  // 表单数据
  dialogFormData: {
    name: '',
    enable: 0,
    point: 0
  }
})

const switchEnable = (rule) => {
  switchEnableLoading.value = true
  api.switchEnable({
    name: rule.name,
    point: rule.point,
    enable: rule.enable === 0 ? 1 : 0
  }).then(() => {
    getRule()
    switchEnableLoading.value = false
  })
}

const showUpdateDialog = (rule) => {
  Data.dialogFormVisible = true
  Data.dialogFormData.name = rule.name
  Data.dialogFormData.enable = rule.enable
  Data.dialogFormData.point = rule.point
}

const changeShow = (val) => {
  Data.dialogFormVisible = val
  getRule()
}

const getRule = () => {
  getRuleLoading.value = true
  api.getRule().then(res => {
    Data.Rules = res
    getRuleLoading.value = false
  })
}

onMounted(() => {
  getRule()
})
</script>
